<!--
Vue 3 的 TypeScript 环境中，组件间的传值主要通过 props 和 emit 实现

props 基本用法：props 是父组件向子组件传递数据的方式。子组件通过 defineProps 接收父组件传递的数据
  1、普通传值： 在父组件中通过 v-bind 或直接绑定属性传递。
  2、动态数据： 可传递动态计算的变量或对象。
  3、函数： 通过父组件传递函数给子组件，子组件调用实现逻辑。
-->
<template>
  <div id="wrap">
    <h1>组件传值 props</h1>
    <p>{{ fTitle }}</p>
    <demo :title="`SonDemo3子组件的标题`" :des="sd3Des" :user="sd3User" :propH="sd3PropsFunc"></demo>
    <hr>
    <!-- 子组件demo2 -->
    <demo2 :msg="`徒余留明月忆往昔，温酒会知音`"></demo2>
    <hr>
    <!-- jsx组件 -->
    <demojsx msg="烛光儿晃晃人影长"></demojsx>
    <hr>
    <!-- 子组件demo4 -->
    <demo4 :msg="msg"></demo4>
    <button @click="edit">父级按钮：点击改变</button>
    <hr>
    <!-- 子组件demo5 -->
    <demo5 :title="`小红帽`" :user msg="咩咩咩"></demo5>
    <hr>
    <!-- 子组件demo6 -->
    <demo6 :user></demo6>
    <hr>
    <!-- 子组件demo7 -->
    <!-- <demo7 :msg="`徒余留明月忆往昔，温酒会知音`"></demo7>
    <hr> -->

  </div>
</template>

<script lang="ts">
export default {
  name: 'vue',
};
</script>

<script lang="ts" setup>
import { ref } from 'vue';
import { type Iuser } from './components/demo5.vue';
import demo from './components/demo.vue';
import demo2 from './components/demo2.vue';
import demojsx from './components/demo3.jsx';
import demo4 from './components/demo4.vue';
import demo5 from './components/demo5.vue';
import demo6 from './components/demo6.vue';
import demo7 from './components/demo7.vue';
const fTitle = ref('');
const sd3Des = ref('传入的des')
const sd3User = ref({
  name: '小绿',
  sex: 0,

})
const sd3PropsFunc = (sonTitle: string, fc: Function) => {
  fTitle.value = sonTitle
  fc()
  console.log('这是一个父组件的函数，他被传入了子组件', sonTitle)
}
// 子组件demo4
const msg = ref('小船儿晃晃岁月长');
const edit = () => {
  msg.value = '烛光儿晃晃人影长';
}
//子组件demo5
const user = ref<Iuser>({
  age: 16,
  name: '王小桃',
  sex: '女'
})

//子组件6，7公用数据
const userArr = ref<Iuser[]>([
  {
    id: 1,
    name: '王小明',
    sex: '男',
    age: 17
  },
  {
    id: 2,
    name: '王小桃',
    sex: '女',
    age: 16
  },
  {
    id: 3,
    name: '王小绿',
    sex: '女',
    age: 16
  },
])


</script>

<style lang='scss'>
@use '@/assets/common.scss';

#wrap {
  color: white;
}
</style>
